<template>
  <div
    v-if="examName"
    class="header"
  >
    <div class="recent-test">
      <div class="name">
        <label
          v-if="examDay !== 0"
          class="label"
        >
          距
        </label>{{ examName }}
      </div>
      <div class="time">
        <template v-if="examDay !== 0">
          还有<span
            v-for="(day, index) in countdownDays"
            :key="index"
            class="day"
          >
            {{ day }}
          </span>天
        </template>
        <img
          v-else
          src="~assets/exam/test-today.png"
          class="test-today"
        >
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  data () {
    return {
      examName: '',
      examDay: '',
    }
  },
  computed: {
    countdownDays (): string[] {
      return (this.examDay + '').split('')
    },
  },
  created () {
    this.fetchRecentExam()
  },
  methods: {
    fetchRecentExam () {
      this.$axios({
        url: 'Exam/GetRecentExamForH5',
        method: 'get',
        data: {
          CatagoryId: this.$store.state.category.CategoryId,
        },
      }).then(res => {
        this.examName = res.ExamName
        this.examDay = `${res.CountdownDays}`
      })
    },
  },
})
</script>

<style lang="scss" scoped>
.header {
  padding: 31px 24px;
}
.recent-test {
  padding: 23px 35px 16px;
  text-align: center;
  box-shadow:0px 0px 9px 0px rgba(0, 0, 0, 0.2);
}
.name {
  @include ellipsis;
  color: #4B515E;
  font-size: 30px;
  margin-bottom: 20px;
}
.label {
  margin-right: 6px;
}
.time {
  height: 110px;
  line-height: 110px;
  color: #4B515E;
  font-size: 24px;
}
.day {
  vertical-align: middle;
  display: inline-block;
  height: 110px;
  width: 69px;
  font-size: 56px;
  color: #F78601;
  background: url("~assets/exam/twoCard.png") 50% 50%/100% 100% no-repeat;
  + .day {
    margin-left: -8px;
  }
}
.test-today {
  width: 406px;
}
</style>
